<template>
     <div class="layout">
          <Modal
        v-model="modal1"
        title="填写用户信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <p style="margin-bottom:10px;padding-left:20px">新闻标题：<Input v-model="title" placeholder="请填写新闻标题..." style="width: 80%"></Input></p>
        <p style="margin-bottom:10px;padding-left:20px">新闻内容：<quillEditor  v-model="content"></quillEditor></p>
    </Modal>
     <Modal
        v-model="modal2"
        title="填写用户信息"
        @on-ok="cok"
        @on-cancel="cancel">
        <p style="margin-bottom:10px;padding-left:20px">新闻标题：<Input v-model="ctitle" placeholder="请填写新闻标题..." style="width: 80%"></Input></p>
        <p style="margin-bottom:10px;padding-left:20px">新闻内容：<quillEditor  v-model="ccontent"></quillEditor></p>
    </Modal>
        <Layout>
            <Layout :style="{padding: '20px 20px'}">

                <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
                    <Button @click="addNew" style="margin-left:225px" type="primary">添加新闻</Button>
                    <Button type="primary" @click="removeSelected">删除选中</Button>
                    <Layout>
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                 <Tree style="margin-left:20px;margin-top:20px" ref="tree" :data="data"  @on-select-change="onSelectChange"></Tree>
                             </Menu>


                        </Sider>
                        <Content :style="{ minHeight: '280px', background: '#fff'}">
                            <Table ref="selection" @on-select-all="selectA" @on-select="getSelected" @on-select-cancel="cancelSelected" style="margin-top:20px;height:320px;margin-bottom:20px" border :columns="columns" :data="list"></Table>
                            <Page style="margin-top:10px"  :total="filter.total" :page-size="filter.limit" :page-size-opts="[5,10, 20, 30, 40]" @on-change="changePage" @on-page-size-change="changeLimit" show-sizer></Page>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        </Layout>
</div>
</template>

<script>
import newTree from '../../base/newtree'
import Basenew from '../../base/basenew'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'


import { quillEditor } from 'vue-quill-editor'
export default {
    mixins:[newTree,Basenew],
    components: {
            quillEditor
        },
    data(){
        return{
                
                name:null,
                age:null,
                email:null,
                password:null,
                info:null,
                cname:null,
                cage:null,
                cemail:null,
                cpassword:null,
                cinfo:null,
                changeId:null,
                cateId:null,
                title:null,
                content:null,
                ctitle:null,
                ccontent:null,
                ccateId:null,
            columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',

                    },
                  
                    {
                        title: '新闻标题',
                        key: 'title',
                        width:200,
                        ellipsis:true,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'paper-airplane'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '新闻详情',
                        key: 'content',
                        type:'html',
                        ellipsis:true,
                    },
                    {
                        title: '评论数量',
                        key: 'number',
                        width:100
                      
                    },

                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params)
                                            // this.show(params.index)
                                            this.modal2 = true;
                                            
                                            this.ctitle=params.row.title;
                                            this.ccontent=params.row.content;
                                            this.ccateId=params.row.cateId;
                                            this.changeId=params.row._id;
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                     style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                            this.axios({
                                                url:`http://10.31.155.74:3000/news/data/${params.row._id}`,
                                                method:'delete'
                                            }).then(res=>{
                                                this.$Message.info('删除成功');
                                                this.getDate();
                                            })
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                     style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                           
                                            console.log(params)
                                             this.changeId=params.row._id;
                                        }
                                    }
                                }, '查看评论')
                            ]);
                        }
                    }
                ],
            filter:{
                    page:1,
                    total:0,
                    limit:5,
                    name:'',
                },
            module:'news'
        }
    },
    methods:{
         onSelectChange (data){
                console.log(data);
                this.cateId=data[0]._id;
                this.parentId=data[0]._id;
                this.type=data[0].type;
            //    console.log(this.cateId)
            //    console.log(this.parentId)
            //    console.log(this.type)
                this.getDate();
            },
         getTreedata() {
                this.axios({
                    url:`http://10.31.155.74:3000/cate/tree`,
                    method:'get'
                }).then(res=>{

                    this.data=res.data;

                })
            },
         getDate(){
            
                this.axios({
                    url:`http://10.31.155.74:3000/${this.module}/list`,
                    method:'post',
                    data:{
                        page:this.filter.page,
                        total:this.filter.total,
                        limit:this.filter.limit,
                        name:this.filter.name,
                        cateId:this.cateId,
                        id:this.changeId
                    }
                    // data:this.filter
                }).then((res)=>{
                    console.log(res)
                    this.list=res.data.rows;
                    this.filter.total=res.data.total;
                    this.filter.limit = res.data.limit;
                })
            },
            removeSelected(){
                this.$Modal.confirm({
                    title: '确认删除数据吗?',
                    content: '请确认是否删除该记录！',
                    onOk: () => {
                        this.axios({
                                url: `http://10.31.155.74:3000/${this.module}/data/removes`,
                                data: {
                                    ids: this.ids.toString()
                                },
                                method: 'post'
                            }).then(res=>{
                                this.getDate();
                        })
                    }
                });

            },
           
            addNew(){
                this.modal1=true
            },
            ok () {
                // console.log(this.name)
                if(this.title&&this.content){
                    alert(1)
                    this.axios({
                        url:`http://10.31.155.74:3000/${this.module}/data`,
                        method:'post',
                        data:{
                            cateId:this.cateId,
                            title:this.title,
                            content:this.content,
                        }
                    }).then(res=>{
                        this.$Message.info('添加成功');
                        this.getDate();
                        this.title=null;
                        this.content=null;
                    })
                }else{
                    this.$Message.info('添加失败');
                }
            },
            cok(){
               
                if(this.ctitle&&this.ccontent){
                    
                    this.axios({
                        url:`http://10.31.155.74:3000/${this.module}/data/${this.changeId}`,
                        method:'put',
                        data:{ 
                            cateId:this.ccateId,
                            title:this.ctitle,
                            content:this.ccontent,
                        }
                    }).then(res=>{
                        console.log(res);
                        this.getDate();
                        this.$Message.info('修改成功');
                    })
                }else{
                    this.$Message.info('修改失败');
                }
            }
    },  
    mounted(){
                this.getTreedata();
            }
}
</script>

<style>

</style>
